<template>
  <div>
    <el-card>
      <el-row  style="flex-wrap: wrap;" :gutter="10">
        <!--时间搜索-->
        <el-col :span="7" style="text-align: left;">
          <el-date-picker v-model="pullOrderListReqForm.queryTime" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-col>
        <el-col :span="3" style="text-align: right;">
          <el-input v-model="pullOrderListReqForm.pullOrderCode"  placeholder="请输入出库编号">
          </el-input>
        </el-col>
        <el-col :span="3" style="text-align: left;">
          <el-input v-model="pullOrderListReqForm.batchNumber"  placeholder="请输入批次编号">
          </el-input>
        </el-col>
        <el-col :span="3" style="text-align: left;">
          <el-input v-model="pullOrderListReqForm.pullOrderOwn"  placeholder="请输入创建人">
          </el-input>
        </el-col>
        <el-col :span="3" style="text-align: left;">
          <el-input v-model="pullOrderListReqForm.pullOrderStatus"  placeholder="请输入状态">
          </el-input>
        </el-col>
        <el-col :span="3" style="text-align: left;">
          <el-button class="searchbtn" @click="searchPullOrderList" type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24" style="text-align: right;">
          <el-button type="primary" size="mini" @click="addPullOrderBtnClick">添加出库单</el-button>
        </el-col>
      </el-row>
      <el-table :data="pullOrderList" border>
        <el-table-column label="No" type="index"></el-table-column>
        <el-table-column label="出库单编号" prop="pullOrderCode" min-width="200"></el-table-column>
        <el-table-column label="批次号" prop="batchNumber" min-width="200"></el-table-column>
        <el-table-column label="创建人" prop="pullOrderOwn" min-width="200"></el-table-column>
        <el-table-column label="创建时间" prop="pullOrderCreatime" min-width="200" :formatter="this.$utils.dataFormat"></el-table-column>
        <el-table-column label="出库单状态" prop="pullOrderStatus" min-width="200"></el-table-column>
        <el-table-column label="操作" width="230" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="openDraw(scope.row)">详情</el-button>
            <el-button type="primary" size="mini" @click="pullOrderEditBtnClick(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="pullOrderDeleteBtnClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pullOrderListReqForm.pageNum"
        :page-sizes="[10, 20, 30, 40]" :page-size="pullOrderListReqForm.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <el-drawer title="添加出库详情" :visible.sync="tableDraw" direction="rtl" size="80%" :wrapperClosable="false">
        <el-row :gutter="20">
          <el-col :span="18">
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="grid-content bg-purple">出库单编号:<span>{{detailsData.pullOrderCode}}</span></div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">创建人:<span>{{detailsData.pullOrderOwn}}</span></div>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="grid-content bg-purple">创建时间:<span>{{detailsData.pullOrderCreatime}}</span></div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">出库状态:<span>{{detailsData.pullOrderStatus}}</span></div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <div id="outQrc" class="qrcode" style="margin-top: -60px;"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2" style="text-align: right; padding: 0; font-weight: inherit;">
            <el-button type="primary" size="mini" @click="addpullOrderDetailsClick">添加出库物料</el-button>
          </el-col>
        </el-row>
        <el-table :data="pullOrderDetailList" border>
          <el-table-column label="No" type="index"></el-table-column>
          <el-table-column label="物料详情编号" prop="pullOrderDetailCode" min-width="180"></el-table-column>
          <el-table-column label="物料编号" prop="productCode" min-width="180"></el-table-column>
          <el-table-column label="物料名称" prop="productName" min-width="180"></el-table-column>
          <el-table-column label="数量" prop="pullOrderCount" min-width="180"></el-table-column>
          <el-table-column label="完成数量" prop="finishCount" min-width="180"></el-table-column>
          <el-table-column label="操作" width="250" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="qrCodeClick(scope.row)">二维码</el-button>
              <el-button type="primary" size="mini" @click="pullOrderEditBtnDetailsClick(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="pullOrderDeleteDetailsBtnClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--        <el-pagination :current-page="1" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total">
        </el-pagination> -->
        <el-drawer title="物料详情二维码" :append-to-body="true" :before-close="qrCodeDialogClosed" :visible.sync="qrCodeDialog"
          :wrapperClosable="false" size="50%">
          <span style="text-align: center">
            <el-card class="box-card" id="printTest" style="display: flex;    justify-content: center;">
              <div id='qrcode' class='qrcode'></div>
              <div style="display: inline-block;float: right;    padding: 0 20px;">
                <div class="text item">
                  {{'物料名称: ' + qrCodeForm.productName }}
                </div>
                <div class="text item">
                  {{'物料编号: ' + qrCodeForm.productCode }}
                </div>
                <div class="text item">
                  {{'物料数量: ' + qrCodeForm.pullOrderCount }}
                </div>
              </div>
            </el-card>
            <div style="margin-top: 10px;">
              <el-button type="primary" v-print="'#printTest'">打印二维码</el-button>
            </div>
          </span>
        </el-drawer>

        <el-drawer title="添加出库物料" :append-to-body="true" :before-close="addpullOrderDetailsDialogClosed" :visible.sync="addpullOrderDetailsDialog"
          :wrapperClosable="false" size="50%">
          <!-- //添加物料 -->
          <span style="text-align: center">
            <el-form ref="addpullOrderDetailsFormRef" :model="addpullOrderDetailsForm" :rules="addpullOrderDetailsFormRules"
              label-position="right" label-width="100px">
              <el-form-item label="物料名称" prop="productName" v-on:keyup.enter.native="addDetails">
                <el-select v-model="addpullOrderDetailsForm.productName" @change="selectGet" filterable placeholder="请选择物料">
                  <el-option v-for="item in productList" :key="item.productCode" :label="item.productName" :value="item.productCode">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数量" prop="pullOrderCount" v-on:keyup.enter.native="addDetails">
                <el-input v-model="addpullOrderDetailsForm.pullOrderCount"></el-input>
              </el-form-item>
            </el-form>
            <div>
              <el-button type="primary" @click="addDetails">提交</el-button>
            </div>
          </span>
        </el-drawer>
        <!-- //编辑物料 -->
        <el-drawer title="编辑出库物料" :append-to-body="true" :before-close="editpullOrderDetailsDialogClosed" :visible.sync="editpullOrderDetailsDialog"
          :wrapperClosable="false" size="50%">
          <span style="text-align: center">
            <el-form ref="editpullOrderDetailsFormRef" :model="editpullOrderDetailsForm" :rules="addpullOrderDetailsFormRules"
              label-position="right" label-width="100px">
              <el-form-item label="物料名称" prop="productName" v-on:keyup.enter.native="eidtDetails">
                <el-select v-model="editpullOrderDetailsForm.productName" @change="selectGet" filterable placeholder="请选择物料">
                  <el-option v-for="item in productList" :key="item.productCode" :label="item.productName" :value="item.productCode">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数量" prop="pullOrderCount" v-on:keyup.enter.native="eidtDetails">
                <el-input v-model="editpullOrderDetailsForm.pullOrderCount"></el-input>
              </el-form-item>
            </el-form>
            <div>
              <el-button type="primary" @click="eidtDetails">提交</el-button>
            </div>
          </span>
        </el-drawer>

      </el-drawer>

      <el-dialog v-dialogDrag title="添加出库单" :visible.sync="addPullOrderDialog" width="40%" center @closed="addPullOrderDialogClosed"
        :close-on-click-modal="false">
        <span style="text-align: center">
          <el-form ref="addPullOrderFormRef" :model="addPullOrderForm" :rules="addPullOrderFormRules" label-position="right"
            label-width="100px">
            <el-form-item label="批次号" prop="batchNumber" v-on:keyup.enter.native="addPullOrder">
              <el-input v-model="addPullOrderForm.batchNumber"></el-input>
            </el-form-item>
            <el-form-item label="创建人" prop="pullOrderOwn" v-on:keyup.enter.native="addPullOrder">
              <el-input v-model="addPullOrderForm.pullOrderOwn"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" prop="pullOrderCreatime" v-on:keyup.enter.native="addPullOrder">
              <el-date-picker v-model="addPullOrderForm.pullOrderCreatime" type="datetime" placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
            <!--            <el-form-item label="出库单状态" prop="pullOrderStatus" v-on:keyup.enter.native="addPullOrder">
              <el-input v-model="addPullOrderForm.pullOrderStatus"></el-input>
            </el-form-item> -->
          </el-form>
          <div>
            <el-button type="primary" @click="addPullOrder">提交</el-button>
          </div>
        </span>
      </el-dialog>
      <el-dialog v-dialogDrag title="编辑出库单" :visible.sync="editPullOrderDialog" width="40%" center @closed="editPullOrderDialogClosed"
        :close-on-click-modal="false">
        <span style="text-align: center">
          <el-form ref="editPullOrderFormRef" :model="editPullOrderForm" :rules="addPullOrderFormRules" label-position="right"
            label-width="100px">
            <el-form-item label="批次号" prop="batchNumber" v-on:keyup.enter.native="editPullOrder">
              <el-input v-model="editPullOrderForm.batchNumber"></el-input>
            </el-form-item>
            <el-form-item label="创建人" prop="pullOrderOwn" v-on:keyup.enter.native="editPullOrder">
              <el-input v-model="editPullOrderForm.pullOrderOwn"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" prop="pullOrderCreatime" v-on:keyup.enter.native="editPullOrder">
              <el-date-picker v-model="editPullOrderForm.pullOrderCreatime" type="datetime" @change="changeStatus"
                placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
            <!--            <el-form-item label="出库单状态" prop="pullOrderStatus" v-on:keyup.enter.native="editPullOrder">
              <el-input v-model="editPullOrderForm.pullOrderStatus"></el-input>
            </el-form-item> -->
          </el-form>
          <div>
            <el-button type="primary" @click="editPullOrder">提交</el-button>
          </div>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  export default {
    name: 'WarehouseIn',
    data() {
      return {
        pullOrderList: [],
        pullOrderDetailList: [],
        total: 0,
        addPullOrderDialog: false,
        editPullOrderDialog: false,
        addpullOrderDetailsDialog: false,
        editpullOrderDetailsDialog: false,
        qrCodeDialog: false,
        pullOrderListReqForm: {
          pageNum: 1,
          pageSize: 10
        },
        pullOrderDetailsListReqForm: {
          pageNum: 1,
          pageSize: 10
        },
        addpullOrderDetailsForm: {
          pullOrderCode: '',
          productCode: '',
          productName: '',
          pullOrderCount: ''
        },
        editpullOrderDetailsForm: {
          pullOrderDetailId: '',
          pullOrderDetailCode: '',
          pullOrderCode: '',
          productCode: '',
          productName: '',
          pullOrderCount: ''
        },
        qrCodeForm: {
          pullOrderDetailId: '',
          pullOrderCode: '',
          productCode: '',
          productName: '',
          pullOrderCount: ''
        },
        addPullOrderForm: {
          pullOrderCreatime: '',
          pullOrderOwn: '',
          batchNumber: '',
          pullOrderStatus: ''
        },
        editPullOrderForm: {
          pullOrderId: '',
          pullOrderCreatime: '',
          pullOrderOwn: '',
          batchNumber: '',
          pullOrderStatus: ''
        },
        addPullOrderFormRules: {
          batchNumber: [{
            required: true,
            message: '请输入批次号',
            trigger: 'blur'
          }],
          pushOrderOwn: [{
            required: true,
            message: '请输入创建人',
            trigger: 'blur'
          }],
          pushOrderCreatime: [{
            required: true,
            message: '请输入时间',
            trigger: 'blur'
          }]
        },
        editPullOrderFormRules: {},
        tableDraw: false,
        tableDrawData: [],
        detailsData: {
          pullOrderCode: '',
          pullOrderCreatime: '',
          pullOrderOwn: ',',
          pullOrderStatus: ''
        },
        productListReqForm: {
          pageNum: 1,
          pageSize: 100000
        },
        productList: [],
        sobj: {},
        addpullOrderDetailsFormRules: {
          productCode: [{
            required: true,
            message: '请输入物料编号',
            trigger: 'blur'
          }],
          productName: [{
            required: true,
            message: '请输入物料名称',
            trigger: 'blur'
          }],
          pullOrderCount: [{
            required: true,
            message: '请输入数量',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {

      async searchPullOrderList() {
        this.getPullOrderList()
      },
      async getPullOrderList() {
        const res = await this.$apiUtil.postByJson('pullOrder/getPullOrderList', this.pullOrderListReqForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.pullOrderList = res.data.pullOrderVOS
        this.total = res.data.totalSize
        // console.log(this.detailsData.pullOrderId)
        if (this.detailsData.pullOrderId) {
          this.getpullOrderDetailList()
        }
      },
      async getProductList() {
        const res = await this.$apiUtil.postByJson('product/getProductList', this.productListReqForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.productList = res.data.productVOS
      },
      handleSizeChange(newSize) {
        this.pullOrderListReqForm.pageSize = newSize
        this.getPullOrderList()
      },
      handleCurrentChange(newPage) {
        this.pullOrderListReqForm.pageNum = newPage
        this.getPullOrderList()
      },
      addPullOrderBtnClick() {
        this.addPullOrderDialog = true
        this.addPullOrderForm.pullOrderCreatime = this.$utils.dataFormatNow()
      },
      addpullOrderDetailsClick() {
        this.addpullOrderDetailsDialog = true
      },
      addpullOrderDetailsDialogClosed() {
        this.addpullOrderDetailsDialog = false
      },
      editpullOrderDetailsDialogClosed() {
        this.editpullOrderDetailsDialog = false
      },
      qrCodeDialogClosed() {
        this.qrCodeDialog = false
      },
      async addPullOrder() {
        const res = await this.$apiUtil.postByJson('pullOrder/addPullOrder', this.addPullOrderForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.$message.success('添加出库单成功！')
        this.addPullOrderDialog = false
        this.getPullOrderList()
      },
      pullOrderEditBtnClick(row) {
        // console.log(row)
        this.editPullOrderDialog = true
        this.editPullOrderForm.pullOrderId = row.pullOrderId
        this.editPullOrderForm.pullOrderCode = row.pullOrderCode
        this.editPullOrderForm.batchNumber = row.batchNumber
        this.editPullOrderForm.pullOrderCreatime = row.pullOrderCreatime
        this.editPullOrderForm.pullOrderOwn = row.pullOrderOwn
        this.editPullOrderForm.pullOrderStatus = row.pullOrderStatus
      },
      // 物料编辑
      pullOrderEditBtnDetailsClick(row) {
        // console.log(row)
        this.editpullOrderDetailsDialog = true
        this.editpullOrderDetailsForm.pullOrderDetailId = row.pullOrderDetailId
        this.editpullOrderDetailsForm.pullOrderDetailCode = row.pullOrderDetailCode
        this.editpullOrderDetailsForm.pullOrderCode = row.pullOrderCode
        this.editpullOrderDetailsForm.productCode = row.productCode
        this.editpullOrderDetailsForm.productName = row.productName
        this.editpullOrderDetailsForm.pullOrderCount = row.pullOrderCount
      },
      // 物料编辑
      qrCodeClick(row) {
        // console.log(row)
        this.qrCodeDialog = true
        this.qrCodeForm.pullOrderDetailId = row.pullOrderDetailId
        this.qrCodeForm.pullOrderCode = row.pullOrderCode
        this.qrCodeForm.productCode = row.productCode
        this.qrCodeForm.productName = row.productName
        this.qrCodeForm.pullOrderCount = row.pullOrderCount
        /* eslint-disable no-new */
        this.$nextTick(function() {
          document.getElementById('qrcode').innerHTML = ''
          const qrcode = new QRCode('qrcode', { // eslint-disable-line no-unused-vars
            width: 200,
            height: 200,
            text: 'product_' + row.productCode,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          })
        })
      },
      async pullOrderDeleteBtnClick(row) {
        this.$alert('确定删除出库单:' + row.pullOrderCode + ' ?', '提示', {
          confirmButtonText: '确定',
          center: true,
          callback: async action => {
            if (action === 'confirm') {
              const res = await this.$apiUtil.postByForm('pullOrder/deletePullOrder', {
                pullOrderId: row.pullOrderId
              })
              // console.log(res)
              if (res.code !== '200') {
                return this.$message.error(res.msg)
              }
              this.$message.success('删除出库单成功')
              this.getPullOrderList()
            }
          }
        })
      },
      async editPullOrder() {
        const res = await this.$apiUtil.postByJson('pullOrder/editPullOrder', this.editPullOrderForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.$message.success('编辑出库单成功！')
        this.editPullOrderDialog = false
        this.getPullOrderList()
      },
      async openDraw(row) {
        console.log(row)
        this.detailsData = row
        this.getpullOrderDetailList()
        this.tableDraw = true
        // 显示详情二维码
        /* eslint-disable no-new */
        this.$nextTick(function() {
          document.getElementById('outQrc').innerHTML = ''
          const outQrc = new QRCode('outQrc', { // eslint-disable-line no-unused-vars
            width: 100,
            height: 100,
            text: '' + row.pullOrderCode,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          })
        })
      },
      // 物料列表
      async getpullOrderDetailList() {
        let orderDetailsTemp = {}
        console.log(this.pullOrderList)
        orderDetailsTemp = this.pullOrderList.find((item) => {
          return item.pullOrderId === this.detailsData.pullOrderId
        })
        this.pullOrderDetailList = orderDetailsTemp.pullOrderDetailVOS
      },
      // 添加物料
      async addDetails() {
        this.addpullOrderDetailsForm.pullOrderCode = this.detailsData.pullOrderCode
        const res = await this.$apiUtil.postByJson('pullOrderDetail/addPullOrderDetail', this.addpullOrderDetailsForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.$message.success('添加出库物料成功！')
        this.addpullOrderDetailsDialog = false
        // this.getpullOrderDetailList()
        this.getPullOrderList()
      },
      // 编辑物料
      async eidtDetails() {
        const res = await this.$apiUtil.postByJson('pullOrderDetail/editPullOrderDetail', this.editpullOrderDetailsForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.$message.success('编辑出库物料成功！')
        this.editpullOrderDetailsDialog = false
        // this.getpullOrderDetailList()
        this.getPullOrderList()
      },
      async pullOrderDeleteDetailsBtnClick(row) {
        this.$alert('确定删除当前物料:' + row.productName + ' ?', '提示', {
          confirmButtonText: '确定',
          center: true,
          callback: async action => {
            if (action === 'confirm') {
              const res = await this.$apiUtil.postByForm('pullOrderDetail/deletePullOrderDetail', {
                pullOrderDetailId: row.pullOrderDetailId
              })
              // console.log(res)
              if (res.code !== '200') {
                return this.$message.error(res.msg)
              }
              this.$message.success('删除成功！')
              // this.getpullOrderDetailList()
              this.getPullOrderList()
            }
          }
        })
      },
      selectGet(vId) {
        let sobj = {}
        sobj = this.productList.find((item) => {
          return item.productCode === vId
        })
        this.addpullOrderDetailsForm.productCode = sobj.productCode
        this.addpullOrderDetailsForm.productName = sobj.productName
      },
      addPullOrderDialogClosed() {
        this.$refs.addPullOrderFormRef.resetFields()
      },
      editPullOrderDialogClosed() {
        this.$refs.editPullOrderFormRef.resetFields()
      },
      printqrCode() {},
      changeStatus(val) {
        this.editPullOrderForm.pullOrderCreatime = val
        console.log(val)
      }
    },
    created() {
      this.getPullOrderList()
      this.getProductList()
    }
  }
</script>

<style lang="less">
  .el-drawer__body {
    padding: 20px;
  }

  .el-drawer__header {
    font-size: 0.4rem;
    margin-bottom: 20px;
  }

  .el-select {
    width: 100%;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    div {
      span {
        font-weight: bold;
      }
    }
  }

  .qrcode {
    display: inline-block;

    img {
      width: 150px;
      height: 150px;
      // background-color: #000; //设置白色背景色
      // border: 5px solid;
      // box-sizing: border-box;
    }
  }

  .text {
    padding: 5px 0;
    font-size: 20px;
  }

  :focus {

    outline: 0;
  }
</style>
